<template>
    <div>
    	<div class='ump'>
            <div class='content-title'>插件</div>
            <div style='padding:20px;min-height: 500px'>
                <!-- <Row style='margin-top:20px'>
                    <Col span="6" v-for='item in ads' :key='item'>
                        <a @click='toAddons(item.plugins)'>
                            <img v-if="item.image && item.image.savename" v-lazy="getImage(item.image.savename)" style='width:100%;height:120px'/>
                            <img v-else src="../../../../images/noimg.gif" style='width:100%;height:120px'/>
                        </a>
                    </Col>
                </Row> -->
                <Row v-for='item in category' :key='item'>          
                    <Row style='margin-top:20px;'>
                        <Col span="24">
                            <h3 style='padding-left:5px;'>{{item.name}}</h3>
                        </Col>
                    </Row>
                    <Row style='margin-top:10px;'>
                        <Col span="6" v-for='i in item.plugins' :key='item'>
                            <a class='manage clearfix' @click='toAddons(i)'>
                                <div class='manage-logo'>
                                    <img v-lazy="i.url"/>
                                </div>
                                <div style='float: left;margin-left: 10px'>
                                    <div class='manage-name text_overflow text_overflow_line_1'>{{i.name}}</div>
                                    <div class='manage-desc'>{{i.remark}}</div>
                                </div>
                            </a> 
                        </Col>
                    </Row>
                </Row>
            </div>   
        </div>
    </div>
</template>
<script>
    import captcha from '../../../../images/captcha.png';
    import doc from '../../../../images/doc.png';
    import wxpay from '../../../../images/wxpay.png';
    import alipay from '../../../../images/alipay.png';
    import wxa from '../../../../images/wxa.png';
    import mail from '../../../../images/mail.png';
    export default{
        data(){
            return {
                category: [
                    {name:'文档',plugins:[
                        {name:'文档',remark:'测试接口方便快捷！',url:doc}]
                    },
                    {name:'验证',plugins:[
                        {name:'验证码',remark:'接入快速，极速体验！',url:captcha}]
                    },
                    {name:'支付',plugins:[
                        {name:'支付宝',remark:'支付宝 知托付！',url:alipay},
                        {name:'微信',remark:'让微信支付更轻松！',url:wxpay},
                        {name:'小程序',remark:'让小程序支付更轻松！',url:wxa},
                        ]
                    },
                    {name:'邮件',plugins:[
                        {name:'邮件',remark:'让企业管理更高效、更轻松！',url:mail}]
                    }],
                ads: []
            }
        },
        created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
        },
        methods:{
            toAddons(item){
                this.$bus.emit('showSub',item.name)
            },
            getImage(savename){
                return `http://img.qingful.com/${savename}`;
            }
        }
    }
</script>
<style>
    .ump {
        background: #fff;
    }

    .manage {
        margin: 8px;
        padding: 10px;
        display: block;
        background: #f9f9f9;
        border-radius: 2px;
    }

    .manage:hover {
        background: #f2f7fb;
    }

    .clearfix:after {
        content: '';
        visibility: hidden;
        font-size: 0;
        height: 0;
        display: block;
        clear: both;
    }

    .manage-logo {
        float: left;
    }

    .manage-logo img {
        width: 40px;
        height: 40px;
        border-radius: 2px;
        display: block;
    }

    .manage-name {
        font-size: 14px;
        color: #333;
        font-weight: bold;
    }

    .manage-desc {
        font-size: 12px;
        color: #999;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .manage-tag {
        float: right;
        color: #ed3f14;
    }
</style>